import PanelRight from '../../../../../common/PanelRight';
import { useState, useEffect, useContext, useRef } from 'react';
import { resourcePath } from '../../../../../../utils/resource';
import { CloseOutlined, DownOutlined } from '@ant-design/icons';
import { Button, Descriptions, Skeleton, Avatar, Divider, Dropdown, InputNumber, List, Radio, Space, Table, Select, Carousel, Spin } from 'antd';
import useBusinessMap from '../../../../../common/BusinessMap';
import LittleTitle from '../../../../../common/LittleTitle';
import './index.less'
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import ScrollTable from '../../../../../common/ScrollTable';
import VirtualList from 'rc-virtual-list';
import yellowPng from './images/黄色预警.png';
import redPng from './images/红色预警.png';
import orgPng from './images/橙色预警.png';
import bluePng from './images/蓝色预警.png';
import FetchHelper from '../../../../../../utils/helper/fetch-helper';
import ResponseData from '../../../../../../utils/helper/response-data';
import Static from 'ol/source/ImageStatic';
import InfiniteScroll from 'react-infinite-scroll-component';
import WsPlayer from '../../../../../../WsPlayer';
import GlobalContext from '../../../../../../utils/GlobalContext';
import AreaStat from './AreaStat';
import LastWarning from './LastWarning';
import dayjs from 'dayjs';

export default function Yujinmsg(props) {

    //const [showModel, setShowModel] = useState(true);
    const { activeKey } = props;
    const [datas, setDatas] = useState(null);
    const [monitors, setMonitors] = useState([]);
    const [videoItems, setVideoItems] = useState([]);
    const [timeType, setTimeType] = useState(1);
    const playersRef = useRef({});

    const ids = ['1000114', '1000117', '1000120', '1000123', '1008666']
    const [idVideoObj, setIdVideoObj] = useState({});
    const [currentId, setCurrentId] = useState(ids[0]);

    const { monitorChangeDuration } = useContext(GlobalContext);

    // 监控点名称映射
    const monitorNames = {
        '1000114': '东区防洪监控点',
        '1000117': '西区河道监控点',
        '1000120': '南区排涝监控点',
        '1000123': '北区预警监控点',
        '1008666': '中心区域监控点'
    };

    // 监控状态数据
    const monitorStatus = {
        '1000114': { online: true, signal: '良好', lastUpdate: '2024-01-15 14:30:25' },
        '1000117': { online: true, signal: '优秀', lastUpdate: '2024-01-15 14:29:58' },
        '1000120': { online: false, signal: '离线', lastUpdate: '2024-01-15 13:45:12' },
        '1000123': { online: true, signal: '良好', lastUpdate: '2024-01-15 14:30:18' },
        '1008666': { online: true, signal: '优秀', lastUpdate: '2024-01-15 14:30:30' }
    };

    useEffect(() => {
        let startTime, endTime;
        switch (timeType) {
            case 1: startTime = dayjs().format('YYYY-MM-DD 00:00:00')
                endTime = dayjs().format('YYYY-MM-DD 23:59:59');
                break;
            case 2: startTime = dayjs().startOf('month').format('YYYY-MM-DD 00:00:00');
                endTime = dayjs().endOf('month').format('YYYY-MM-DD 23:59:59');
                break;
            case 3: startTime = dayjs().startOf('year').format('YYYY-MM-DD 00:00:00');
                endTime = dayjs().endOf('year').format('YYYY-MM-DD 23:59:59');
                break;
            default:
        }
        JcyjApi.yhlb_find(activeKey, startTime, endTime).then(resp => {
            setDatas(resp.data);
            console.log(resp.data)
        })
    }, [activeKey, timeType])


    return <div className='fill h100 layout-v right-warning'>
        <div className='fill h0 layout-v'>
            <LittleTitle className="layout-h center" extra={
                <div>
                    <Radio.Group value={timeType} onChange={e => {
                        setTimeType(e.target.value)
                    }} size="small">
                        <Radio.Button value={1}>今日</Radio.Button>
                        <Radio.Button value={2}>本月</Radio.Button>
                        <Radio.Button value={3}>本年</Radio.Button>
                    </Radio.Group>
                </div>
            } title={
                <span style={{
                    marginRight: 80
                }}>等级概要</span>
            }>
            </LittleTitle>
            <div className='layout-v' style={{
                padding: 12,
            }} >
                <div className='layout-v yujin-item center'>
                    <div className='layout-h' style={{
                        justifyContent: "space-around",
                        width: '100%'
                    }}>
                        <div className='layout-v center relative item-bg h100' style={{ 
                            position: 'relative',
                            backgroundImage: `url(${redPng})`,
                            backgroundSize: '92px 87px',
                            backgroundPosition: 'center',
                            backgroundRepeat: 'no-repeat',
                            width: '92px',
                            height: '87px'
                        }}>
                            <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }} className='item-content'>
                                <span className='value' style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '8px' }}>
                                    {datas?.find(data => { return data.jbys === '红色' })?.number || 0}
                                </span>
                                <div style={{ fontSize: '16px' }}>红色预警</div>
                            </div>
                        </div>
                        <div className='layout-v center relative item-bg h100' style={{ 
                            position: 'relative',
                            backgroundImage: `url(${orgPng})`,
                            backgroundSize: '92px 87px',
                            backgroundPosition: 'center',
                            backgroundRepeat: 'no-repeat',
                            width: '92px',
                            height: '87px'
                        }}>
                            <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }} className='item-content'>
                                <span className='value' style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '8px' }}>{datas?.find(data => { return data.jbys === '橙色' })?.number || 0}</span>
                                <div style={{ fontSize: '16px' }}>橙色预警</div>
                            </div>
                        </div>
                        <div className='layout-v center relative item-bg h100' style={{ 
                            position: 'relative',
                            backgroundImage: `url(${yellowPng})`,
                            backgroundSize: '92px 87px',
                            backgroundPosition: 'center',
                            backgroundRepeat: 'no-repeat',
                            width: '92px',
                            height: '87px'
                        }}>
                            <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }} className='item-content'>
                                <span className='value' style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '8px' }}>{datas?.find(data => { return data.jbys === '黄色' })?.number || 0}</span>
                                <div style={{ fontSize: '16px' }}>黄色预警</div>
                            </div>
                        </div>
                        <div className='layout-v center relative item-bg h100' style={{ 
                            position: 'relative',
                            backgroundImage: `url(${bluePng})`,
                            backgroundSize: '92px 87px',
                            backgroundPosition: 'center',
                            backgroundRepeat: 'no-repeat',
                            width: '92px',
                            height: '87px'
                        }}>
                            <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }} className='item-content'>
                                <span className='value' style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '8px' }}>{datas?.find(data => { return data.jbys === '蓝色' })?.number || 0}</span>
                                <div style={{ fontSize: '16px' }}>蓝色预警</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <LittleTitle>
                <span style={{
                    marginRight: 80
                }}>区域统计</span>

            </LittleTitle>
            <AreaStat />
            <LittleTitle>
                <span style={{
                    marginRight: 80
                }}>最新预警</span>

            </LittleTitle>
            <LastWarning yhlb={activeKey} />
            <LittleTitle>
                <span style={{
                    marginRight: 80
                }}>视频监控</span>

            </LittleTitle>
            <div className='layout-v fill h0' style={{
                overflow: "auto"
            }}>
                <Carousel autoplay autoplaySpeed={monitorChangeDuration ? monitorChangeDuration * 1000 : 30000} afterChange={current => {
                    setMonitors([]);
                    setVideoItems([])
                    setCurrentId(ids[current])
                }}>
                    {ids.map((id, index) => (
                        <div key={id} className="video-monitor-slide">
                            <div className="video-monitor-container">
                                {/* 视频播放区域 */}
                                <div className="video-player-area">
                                    <div className="video-screen">
                                        {/* 左上角监控名称 */}
                                        <div className="monitor-name-overlay">
                                            {monitorNames[id]}
                                        </div>

                                        {/* 播放按钮 */}
                                        <div className="play-button-overlay">
                                            <button className="play-btn" disabled={!monitorStatus[id].online}>
                                                {monitorStatus[id].online ? '▶' : '⚠'}
                                            </button>
                                        </div>

                                        {/* 网格线 */}
                                        <div className="video-grid">
                                            <div className="grid-line horizontal"></div>
                                            <div className="grid-line horizontal"></div>
                                            <div className="grid-line vertical"></div>
                                            <div className="grid-line vertical"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </Carousel>
            </div>
        </div>
    </div>

}